<template>
    <div class="page-container">
        <div class="grid-container">
            <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template slot="index" slot-scope="text,record,index">
                    {{index+1}}
                </template>
                <template slot="type" slot-scope="text,record">
                    {{record.typeName}}
                </template>
                <template slot="isLimitReceive" slot-scope="text,record">
                    <p v-if="record.isLimitReceive == true">每人限领{{record.receiveNum}}张</p>
                    <p v-if="record.isLimitReceive == false">不限制领取</p>
                    <div class="default_tips" style="margin-top:2px;">
                        <p v-if="record.isLimit == true">库存:{{record.stock}}</p>
                        <p v-if="record.isLimit == false">库存:不限</p>
                    </div>
                </template>
                <template slot="amount" slot-scope="text,record">
                    {{fmMoney(record.amount,2,true)}}
                    <p class="default_tips" style="margin-top:2px;" v-if="record.isFull==true">满{{fmMoney(record.fullAmount,2,true)}}可用</p>

                </template>
                <template slot="date" slot-scope="text,record">
                    <p v-if="record.isForever == true">永久有效</p>
                    <div v-else>
                        <p>{{parseTime(record.startDate,'yyyy-MM-dd HH:mm:ss')}}至</p>
                        <p>{{parseTime(record.endDate,'yyyy-MM-dd HH:mm:ss')}}</p>
                    </div>
                </template>
                <template slot="progressStatus" slot-scope="progressStatus">
                    <p v-if="progressStatus == 'USING'">进行中</p>
                    <p v-else-if="progressStatus == 'NOT_START'">未开始</p>
                    <p v-else-if="progressStatus == 'ENDED'">已结束</p>
                    <p v-else>--</p>
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a-switch checkedChildren="启用" unCheckedChildren="禁用" @change='onChangeStatus(record.id,record.status,record.title)'  :checked="record.status=='AVAILABLE'" />
                    <a-divider type="vertical" />
                    <a @click="onEdit(record.id)"  class="ant-btn-text"><a-icon type="search" /></a>
                    <a-divider type="vertical" />
                    <a @click="onDeleted(record.id,record.title)"  class="ant-btn-text"><a-icon type="delete" /></a>
                </template>
            </a-table>
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action"></a-col>
                <a-col :span="12" :order="2" class="tool-pagination">
                    <a-pagination v-if="total>params.pageSize" :total="total"  @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
    import {findList,changeStatus,deleted} from "../../../api/coupon";
    import {parseTime,fmMoney} from "../../../utils";
    const columns=[
        {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
        {title:'优惠券名称',dataIndex:'title',align:'left'},
        {title:'类型',dataIndex:'type',align:'center',scopedSlots: { customRender: 'type'}},
        {title:'面值',dataIndex:'amount',align:'center',scopedSlots: { customRender: 'amount'}},
        {title:'领取限制',dataIndex:'isLimitReceive',align:'center',scopedSlots: { customRender: 'isLimitReceive'}},
        {title:'有效期',dataIndex:'date',align:'center',scopedSlots: { customRender: 'date'}},
        {title:'使用状态',dataIndex:'progressStatus',align:'center',width: 100,scopedSlots: { customRender: 'progressStatus'}},
        {title: '操作',dataIndex: 'operation',align:'center',width: 180,scopedSlots: { customRender: 'operation' }}
    ]
    export default {
        name: "ComponentList",
        data() {
            return {
                columns,
                params:{
                    title:'',
                    progressStatus:'USING',
                    pageSize:10,
                    current:1,
                },
                typeList:[],
                dataList:[],
                total:0,
                loading:false,
            }
        },
        props:{
            title:{
                type:String,
                default:''
            },
        },
        watch:{
            title:function(val,oldVal) {
                this.param.title = val
                this.onLoad();
            }
        },
        methods:{
            fmMoney,parseTime,
            //启用 禁用
            onChangeStatus(id,status,title){
                let statusStr = "";
                statusStr = status=='AVAILABLE'?'禁用':'启用';
                let _this = this;
                this.$confirm({
                    title: '确认'+statusStr+title+'吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        status = status=='AVAILABLE'?'FREEZE':'AVAILABLE';
                        _this.handleChangeStatus(id,status);
                    }, onCancel() {},
                })
            },
            async handleChangeStatus(id,status){
                let _this = this;
                let resp = await changeStatus(id,status);
                if(this.qUtil.validResp(resp)){
                    this.$success({title:'保存成功!',okText:'确定',
                        onOk(){_this.onLoad();}})
                }else{
                    this.$error({title:resp.msg,okText:'确定'})
                }
            },
            onEdit(id){
                this.$router.push({name:'CouponAdd',query:{id:id}});
            },
            onDeleted(id,title){
                let _this = this;
                this.$confirm({
                    title: '确认删除'+title+'吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        _this.handleDeleted(id);
                    }, onCancel() {},
                })
            },
            async handleDeleted(id){
                this.loading = true;
                let _this = this;
                let resp = await deleted(id);
                this.loading = false;
                if(this.qUtil.validResp(resp)){
                    this.$success({title:'保存成功!',okText:'确定',
                        onOk(){_this.onLoad();}})
                }else{
                    this.$error({title:resp.msg,okText:'确定'})
                }
            },
            parseTime(date,fmt){
                return parseTime(date,fmt);
            },
            async onLoad(){
                this.loading = true;
                let resp = await findList(this.params);
                this.loading = false;
                if(this.qUtil.validResp(resp)){
                    this.dataList = resp.data.dataList;
                    this.total = resp.data.total;
                }
            }
        },
        mounted(){
            this.params.progressStatus = this.$route.query.active || 'USING';
            this.onLoad();
        },
    }
</script>
